<template>
  <div class="gd">
    <div class="add">
      <!-- <p>count的值------------{{$store.state.count}}</p> -->
      <!-- <p>count的值------------{{count}}</p> -->
      <!-- <p>{{this.$store.getters.showCount}}</p> -->
      <!-- <p>{{showCount}}</p> -->
      <!-- <button @click="addCount">+3</button>
      <button @click="addCount1">+1</button>
      <button @click="addAsync">+1Async</button>
      <button @click="asyncAddN">+NAsync</button> -->
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="lun">
        <i
          class="iconfont icon-left-arrow"
          @click="arrowClick('left')"
        ></i>
        <i
          class="iconfont icon-zuoyoujiantou"
          @click="arrowClick('right')"
        ></i>
        <!-- 轮播图 -->
        <el-carousel
          trigger="click"
          arrow="nerver"
          ref="cardShow"
        >
          <el-carousel-item
            v-for="(item,index) in lunData"
            :key="index"
          >
            <a
              href="#"
              @click.prevent="detailSong(item.targetId)"
            >
              <img v-lazy="item.pic">
            </a>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="guang">
        <img src="../../../assets/image/guang.png">
        <span @click="godown"></span>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="music">
      <!-- 主体 -->
      <div class="g-mn1">
        <div class="g-wrap3">
          <!-- 第一个板块：热门推荐 -->
          <div class="n-rcmd">
            <!-- 标题 -->
            <div class="v-hd2">
              <div class="tab">
                <a
                  href="#"
                  class="retui"
                >热门推荐</a>
                <a href="#">华语&nbsp;&nbsp;|</a>
                <a href="#">流行&nbsp;&nbsp;|</a>
                <a href="#">摇滚&nbsp;&nbsp;|</a>
                <a href="#">民谣&nbsp;&nbsp;|</a>
                <a href="#">电子&nbsp;&nbsp;</a>
              </div>
              <div class="more">
                <a href="#">更多</a>
                <i class="iconfont icon-gengduo"></i>
              </div>
            </div>
            <!-- 内容 -->
            <div class="neirong">
              <ul>
                <li
                  v-for="(item,index) in hotTuiJian"
                  :key="index"
                  @click="hotjiandetail(item.id)"
                >
                  <div class="TopZiFa">
                    <img v-lazy="item.coverImgUrl">
                    <div class="musicTopZi">
                      <i class="iconfont icon-erjiyuyin"></i>
                      <span>{{ item.playCount/10000}}万</span>
                      <i class="iconfont icon-bofang"></i>
                    </div>
                  </div>
                  <p> <a href="#">{{item.name}}</a> </p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 第二个板块：新碟上架 -->
          <div class="n-new">
            <div class="v-hd2">
              <a
                href="#"
                class="retui"
              >新碟上架</a>
              <div class="more">
                <a href="#">更多</a>
                <i class="iconfont icon-gengduo"></i>
              </div>
            </div>
            <div class="inner">
              <div class="roll">
                <!-- 左 -->
                <i
                  class="iconfont icon-left-arrow"
                  @click="goup"
                ></i>
                <ul>
                  <li
                    v-for="(item,index) in altumnList.slice(curbef,curbef+5)"
                    :key="index"
                    @click="goalbum(item.albumId)"
                  >
                    <div class="jiPic">
                      <img v-lazy="item.coverUrl">
                    </div>
                    <p class="musicNam">{{item.albumName}}</p>
                    <p class="authName">{{item.artistName}}</p>
                  </li>
                </ul>
                <!-- 右 -->
                <i
                  class="iconfont icon-zuoyoujiantou"
                  @click="godown1"
                ></i>
              </div>
            </div>
          </div>
          <!-- 第三个板块：榜单 -->
          <div class="n-bill">
            <!-- 标题 -->
            <div class="v-hd2">
              <a
                href="#"
                class="retui"
              >榜单</a>
              <div class="more">
                <a href="#">更多</a>
                <i class="iconfont icon-gengduo"></i>
              </div>
            </div>
            <div class="n-bilst">
              <dl class="blk">
                <dt class="top">
                  <div class="cver">
                    <img src="../../../assets/image/bang1.jpg">
                  </div>
                  <div class="tit">
                    <a
                      href="#"
                      @click.prevent="goBangDan(19723756)"
                    >飙升榜</a>
                    <div class="btn">
                      <i class="iconfont icon-bofang"></i>
                      <i class="iconfont icon-tianjiawenjianjia"></i>
                    </div>
                  </div>
                </dt>
                <dd>
                  <ol>
                    <li
                      class="thsli"
                      v-for="(item,index) in soaringList"
                      :key="index"
                    >
                      <span class="red">{{index+1}}</span>
                      <a
                        href="#"
                        @click.prevent="goSong(item.id)"
                      >{{item.name}}</a>
                      <div class="three">
                        <i
                          class="iconfont icon-bofang"
                          @click="playMusic(item.id)"
                        ></i>
                        <i class="iconfont icon-hao"></i>
                        <i class="iconfont icon-tianjiawenjianjia"></i>
                      </div>
                    </li>
                  </ol>
                  <div class="more"></div>
                </dd>
              </dl>
              <dl class="blk">
                <dt class="top">
                  <div class="cver">
                    <img src="../../../assets/image/bang2.jpg">
                  </div>
                  <div class="tit">
                    <a
                      href="#"
                      @click.prevent="goBangDan(3779629)"
                    >新歌榜</a>
                    <div class="btn">
                      <i class="iconfont icon-bofang"></i>
                      <i class="iconfont icon-tianjiawenjianjia"></i>
                    </div>
                  </div>
                </dt>
                <dd>
                  <ol>
                    <li
                      class="thsli"
                      v-for="(item,index) in newringList"
                      :key="index"
                    >
                      <span class="red">{{index+1}}</span>
                      <a
                        href="#"
                        @click.prevent="goSong(item.id)"
                      >{{item.name}}</a>
                      <div class="three">
                        <i
                          class="iconfont icon-bofang"
                          @click="playMusic(item.id)"
                        ></i>
                        <i class="iconfont icon-hao"></i>
                        <i class="iconfont icon-tianjiawenjianjia"></i>
                      </div>
                    </li>
                  </ol>
                  <div class="more"></div>
                </dd>
              </dl>
              <dl class="blk">
                <dt class="top">
                  <div class="cver">
                    <img src="../../../assets/image/bang3.jpg">
                  </div>
                  <div class="tit">
                    <a
                      href="#"
                      @click.prevent="goBangDan(2884035)"
                    >原创榜</a>
                    <div class="btn">
                      <i class="iconfont icon-bofang"></i>
                      <i class="iconfont icon-tianjiawenjianjia"></i>
                    </div>
                  </div>
                </dt>
                <dd>
                  <ol>
                    <li
                      class="thsli"
                      v-for="(item,index) in ownringList"
                      :key="index"
                    >
                      <span class="red">{{index+1}}</span>
                      <a
                        href="#"
                        @click.prevent="goSong(item.id)"
                      >{{item.name}}</a>
                      <div class="three">
                        <i
                          class="iconfont icon-bofang"
                          @click="playMusic(item.id)"
                        ></i>
                        <i class="iconfont icon-hao"></i>
                        <i class="iconfont icon-tianjiawenjianjia"></i>
                      </div>
                    </li>
                  </ol>
                  <div class="more"></div>
                </dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体侧边 -->
      <div class="g-sd1">
        <div class="n-user-profile">
          <!-- 未登录显示提示登录 -->
          <div
            class="tiLogin"
            v-show="!isLogin"
          >
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <a href="#">用户登录</a>
          </div>
          <!-- 登录后显示用户信息 -->
          <div
            class="myinfo"
            v-show="isLogin"
          >
            <div class="top">
              <div class="fanga">
                <!-- 点击去到user页 -->
                <a
                  href="#"
                  @click.prevent="gouser"
                >
                  <!-- 头像 -->
                  <img v-lazy="userInfo.profile.avatarUrl">
                </a>
              </div>
              <div class="info">
                <!-- 昵称 -->
                <h4 @click.prevent="gouser">{{userInfo.profile.nickname}}</h4>
                <p>LV{{userInfo.profile.userType}}</p>
                <div class="qian">
                  <a href="#">签到</a>
                </div>
              </div>
            </div>
            <ul class="btm">
              <li>
                <a
                  href="#"
                  @click.prevent="goevent"
                >
                  <strong>{{userInfo.profile.eventCount}}</strong>
                  <span>动态</span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="gofollow"
                >
                  <strong>{{userInfo.profile.follows}}</strong>
                  <span>关注</span>
                </a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="gofan"
                >
                  <strong>{{userInfo.profile.followeds}}</strong>
                  <span>粉丝</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 入驻歌手 -->
        <div class="n-single">
          <div class="v-hd3">
            <span>入驻歌手</span>
            <a href="#">查看更多</a>
          </div>
          <ul class="n-enter">
            <li
              v-for="(item,index) in residentSinger"
              :key="index"
            >
              <a href="#">
                <div class="head">
                  <img v-lazy="item.picUrl">
                </div>
                <div class="ifo">
                  <h4>{{item.name}}</h4>
                  <p>暂无</p>
                </div>
              </a>
            </li>
          </ul>
          <div class="shenqin">
            <a href="#">申请成为网易音乐人</a>
          </div>
        </div>
        <!-- 热门主播 -->
        <div class="n-dj">
          <div class="v-hd3">
            <span>热门主播</span>
          </div>
          <ul class="n-enter">
            <li
              v-for="(item,index) in hotAnchor"
              :key="index"
            >
              <a href="#">
                <img v-lazy="item.avatarUrl">
              </a>
              <div class="ifo">
                <h4>{{item.nickName}}</h4>
                <p>心理学家、美食家陈立教授</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../../eventbus'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import { islogina } from '@/request/http'
export default {
  data () {
    return {
      isLogin: false,
      userInfo: {
        profile: {
          avatarUrl: ''
        }
      },
      // 轮播图数据
      lunData: [],

      // 入驻歌手
      residentSinger: [],
      // 热门主播
      hotAnchor: [],

      curbef: 0,
      // uid: 5151127394,

    }
  },
  created () {
    this.islogina()
    this.getLunData()
    this.getHotTuiJian()
    this.getResidentSinger()
    this.getHotAnchor()
    this.getSoaringList()
    this.getAltumnList()
  },
  computed: {
    // 热门推荐、新碟数据、飙升榜数据
    ...mapState(['loginID', 'hotTuiJian', 'altumnList', 'soaringList', 'newringList', 'ownringList'])
  },
  methods: {
    ...mapActions(['getHotTuiJian', 'getAltumnList', 'getSoaringList']),

    ...mapMutations(['goBangDan', 'goSong']),
    arrowClick (val) {
      if (val === 'right') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    },

    async islogina () {
      // let getCook = localStorage.getItem('cookie');
      if (this.loginID !== undefined) {
        this.isLogin = true;
        let res = await axios.get('https://autumnfish.cn//user/detail?uid=' + this.loginID)
        this.userInfo = res.data;
      }

    },
    async getLunData () {
      let res = await axios.get('https://autumnfish.cn//banner?type=1');
      // console.log(res)
      this.lunData = res.data.banners
    },

    // 点击热门推荐歌单，跳转至此歌单页面
    hotjiandetail (id) {
      // console.log(id)
      this.$router.push({ path: '/playlist', query: { id: id } })
    },
    async getResidentSinger () {
      let res = await axios.get('https://autumnfish.cn//top/artists?offset=0&limit=5');
      // console.log(res)
      this.residentSinger = res.data.artists
    },
    async getHotAnchor () {
      let res = await axios.get('https://autumnfish.cn//dj/toplist/popular?limit=5');
      this.hotAnchor = res.data.data.list
    },
    // 点击榜单歌曲的播放按钮，播放音乐
    playMusic (id) {
      bus.$emit('musicid', id)
    },
    goup () {
      // 若是第一页点击左，则到了最后一页
      if (this.curbef === 0) {
        this.curbef = this.altumnList.length - 5
      }
      else {
        this.curbef = this.curbef - 5
      }
    },
    godown1 () {
      if (this.curbef >= this.altumnList.length) {
        this.curbef = 0
      }
      else {
        this.curbef = this.curbef + 5
      }
    },
    // async getAltumnList () {
    //   let res = await axios.get('https://autumnfish.cn//album/list');
    //   this.altumnList = res.data.products
    //   // console.log(res)
    //   // let res2 = await axios.get('https://autumnfish.cn//top/album?offset=' + noeoff + '&limit=5');
    //   // console.log('pppppppppppppppp')
    //   // console.log(res2)
    //   // this.altumnList = res.data.weekData
    // },
    // 点击新碟上架区的碟
    goalbum (id) {
      this.$router.push({ path: '/album', query: { id: id } })
    },
    // 点击头像或昵称，跳转user首页
    gouser () {
      this.$router.push({ path: '/user', query: { id: this.loginID } })
    },
    // 歌曲详情页
    detailSong (uid) {
      // console.log(uid)
      this.$router.push({ path: '/song', query: { id: uid } })
    },
    goevent () {
      this.$router.push({ path: '/user/event', query: { id: this.loginID } })
    },
    gofollow () {
      this.$router.push({ path: '/user/follows', query: { id: this.loginID } })
    },
    gofan () {
      this.$router.push({ path: '/user/fans', query: { id: this.loginID } })
    },
    godown () {
      this.$router.push({ path: '/download' })
    }
  }
}
</script>

<style lang="less" scoped>
.gd {
  .banner {
    margin: 0 140px;
    position: relative;
    .lun {
      position: relative;
      .iconfont {
        font-size: 50px;
        color: #666;
        position: absolute;
      }
      .icon-left-arrow {
        top: 120px;
        left: -50px;
      }
      .icon-zuoyoujiantou {
        top: 120px;
        right: -50px;
      }
      .el-carousel {
        img {
          width: 730px;
          height: 284px;
        }
      }
    }
    .guang {
      position: absolute;
      width: 254px;
      height: 285px;
      right: 0px;
      top: 0;
      z-index: 1000;
    }
  }
  .music {
    overflow: hidden;
    display: flex;
    .g-mn1 {
      // width: 100%;
      // float: left;
      .g-wrap3 {
        margin-left: 140px;
        width: 690px;
        padding: 10px;
        .n-rcmd {
          padding: 0 10px;
          .v-hd2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #c10d0c;
            padding: 10px 0;
            padding-right: 40px;
            .retui {
              font-size: 20px;
              margin: 0 20px;
            }
            .tab {
              font-size: 12px;
              color: #666;
              a {
                margin-right: 7px;
              }
            }
            .more {
              font-size: 12px;
              color: #666;
              .icon-gengduo {
                color: #c20c0c;
                font-size: 12px;
                font-weight: bold;
              }
            }
          }
          .neirong {
            margin-top: 10px;
            ul {
              height: 400px;
              li {
                list-style: none;
                float: left;
                width: 140px;
                height: 204px;
                padding-right: 25px;
                padding-bottom: 30px;
                p {
                  a {
                    color: #000;
                    font-size: 14px;
                  }
                }
                .TopZiFa {
                  position: relative;
                  img {
                    width: 140px;
                    height: 140px;
                  }
                  .musicTopZi {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 27px;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #ccc;
                    .icon-erjiyuyin {
                      float: left;
                      width: 14px;
                      height: 11px;
                      margin: 4px 5px 9px 10px;
                    }
                    span {
                      font-size: 12px;
                    }
                    .icon-bofang {
                      position: absolute;
                      right: 10px;
                      bottom: 5px;
                      width: 16px;
                      height: 17px;
                    }
                  }
                }
              }
            }
          }
        }
        .n-new {
          .v-hd2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #c10d0c;
            padding: 10px 0;
            padding-right: 40px;
            .retui {
              font-size: 20px;
              margin: 0 20px;
            }
            a {
              font-size: 12px;
              margin-right: 7px;
            }
            .more {
              font-size: 12px;
              color: #666;
              .icon-gengduo {
                color: #c20c0c;
                font-size: 12px;
                font-weight: bold;
              }
            }
          }
          .inner {
            margin-top: 10px;
            height: 184px;
            background: #f5f5f5;
            border: 1px solid #fff;
            .roll {
              float: left;
              width: 645px;
              height: 180px;
              overflow: hidden;
              position: relative;
              .icon-left-arrow {
                position: absolute;
                top: 71px;
                left: 20px;
                width: 17px;
                height: 17px;
                color: #666;
              }
              .icon-zuoyoujiantou {
                position: absolute;
                top: 71px;
                right: 0px;
                width: 17px;
                height: 17px;
                color: #666;
              }
              ul {
                margin-left: 45px;
                margin-top: 30px;
                li {
                  width: 100px;
                  list-style: none;
                  float: left;
                  margin-right: 18px;
                  .jiPic {
                    width: 100px;
                    height: 100px;
                    img {
                      width: 100%;
                    }
                  }
                  p {
                    // 超出一行隐藏
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                  .musicNam {
                    font-size: 12px;
                    margin-top: 5px;
                  }
                  .authName {
                    font-size: 12px;
                    color: #666;
                  }
                }
              }
            }
          }
        }
        .n-bill {
          margin-top: 10px;
          margin-bottom: 100px;
          .v-hd2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #c10d0c;
            padding: 10px 0;
            padding-right: 40px;
            .retui {
              font-size: 20px;
              margin: 0 20px;
            }
            a {
              font-size: 12px;
              margin-right: 7px;
            }
            .more {
              font-size: 12px;
              color: #666;
              .icon-gengduo {
                color: #c20c0c;
                font-size: 12px;
                font-weight: bold;
              }
            }
          }
          .n-bilst {
            height: 472px;
            margin-top: 20px;
            padding-left: 1px;
            display: flex;
            border: 1px solid #e0e0e0;
            background-color: #f4f4f4;
            .blk {
              margin-top: 0;
              width: 33%;

              .top {
                height: 100px;
                padding: 20px 0 0 19px;
                .cver {
                  float: left;
                  width: 80px;
                  height: 80px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .tit {
                  float: left;
                  width: 116px;
                  margin: 6px 0 0 10px;

                  a {
                    font-size: 14px;
                    font-weight: 700;
                  }
                  .btn {
                    margin-top: 10px;
                    .iconfont {
                      font-size: 22px;
                      margin-right: 10px;
                      color: #c1c1c1;
                    }
                    .iconfont:hover {
                      color: #9b9b9b;
                    }
                  }
                }
              }
              dd {
                ol {
                  height: 319px;
                  line-height: 32px;
                  list-style: none;
                  li {
                    height: 32px;
                    background-color: #e8e8e8;
                    padding-left: 20px;
                    overflow: hidden;
                    span {
                      color: #666666;
                      font-size: 16px;
                      margin-right: 10px;
                    }
                    .red {
                      color: #c30d0c;
                    }
                    a {
                      font-size: 12px;
                      color: #000;
                    }
                    a:hover {
                      border-bottom: 1px solid #000;
                    }
                    .three {
                      display: none;
                      margin-right: 5px;
                      float: right;
                      color: #999999;
                      font-size: 20px;
                      i:hover {
                        color: #656565;
                      }
                    }
                  }
                  li:nth-child(2n) {
                    background-color: #f4f4f4;
                  }
                  .thsli:hover {
                    .three {
                      display: block;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .g-sd1 {
      position: relative;
      border: 1px solid #dbdbdb;
      // float: right;
      width: 250px;
      .n-user-profile {
        padding-top: 0;
        background: linear-gradient(#fbfbfb, #e9e9e9);
        .tiLogin {
          // display: none;
          height: 126px;
          p {
            width: 205px;
            margin: 0 auto;
            padding: 16px 0;
            line-height: 22px;
            color: #666;
            font-size: 12px;
          }
          a {
            display: block;
            margin: 0 auto;
            width: 100px;
            height: 31px;
            line-height: 31px;
            text-align: center;
            color: #fff;
            background-color: #d8131a;
            font-size: 13px;
            border-radius: 6px;
          }
        }
        // 登录后显示个人信息
        .myinfo {
          height: 165px;
          padding-top: 20px;
          background-color: #f7f7f7;
          // display: none;
          .top {
            display: flex;
            justify-content: center;
            align-items: center;
            .fanga {
              width: 80px;
              height: 80px;
              a {
                display: inline-block;
                width: 80px;
                height: 80px;
                margin-right: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }

            .info {
              width: 115px;
              margin-left: 18px;
              padding-top: 3px;
              h4 {
                overflow: hidden;
                cursor: pointer;
              }
              h4:hover {
                text-decoration: underline;
              }
              p {
                color: #999;
                font-size: 12px;
                padding: 3px;
                margin-top: 5px;
                margin-bottom: 0px;
                cursor: pointer;
              }
              .qian {
                margin-top: 15px;
                a {
                  display: inline-block;
                  width: 80%;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  color: #fff;
                  background-color: #2b7cc9;
                  border-radius: 5px;
                }
              }
            }
          }
          .btm {
            margin: 22px 0 0 20px;
            overflow: hidden;
            li {
              list-style: none;
              float: left;
              height: 40px;
              padding: 0 18px;
              border-right: 1px solid #e4e4e4;
              a {
                color: #666;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
              }
              a:hover {
                color: #0c73c2;
              }
            }
            li:first-child {
              padding-left: 0;
            }
          }
        }
      }
      .n-single {
        margin-top: 15px;
        .v-hd3 {
          position: relative;
          height: 23px;
          margin: 0 20px;
          border-bottom: 1px solid #ccc;
          font-size: 12px;
          span {
            float: left;
            color: #333;
            font-weight: 700;
          }
          a {
            float: right;
            color: #666;
          }
        }
        .n-enter {
          margin: 6px 0 14px 20px;
          li {
            list-style: none;
            margin-top: 14px;
            height: 62px;
            a {
              float: left;
              width: 210px;
              height: 62px;
              background: #fafafa;
              .head {
                float: left;
                width: 62px;
                height: 62px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .ifo {
                float: left;
                width: 133px;
                height: 60px;
                padding-left: 14px;
                border: 1px solid #e9e9e9;
                border-left: none;
                h4 {
                  margin-top: 8px;
                  font-size: 14px;
                  color: #333;
                }
                p {
                  margin-top: 8px;
                  font-size: 12px;
                  color: #666;
                }
              }
            }
          }
        }
        .shenqin {
          a {
            display: inline-block;
            width: 205px;
            height: 31px;
            line-height: 31px;
            margin-left: 20px;
            border-radius: 4px;
            padding: 0 5px 0 0;
            color: #000;
            font-size: 12px;
            font-weight: 700;
            background-color: #f3f3f3;
            text-align: center;
          }
        }
      }
      .n-dj {
        margin-top: 30px;
        .v-hd3 {
          position: relative;
          height: 23px;
          margin: 0 20px;
          border-bottom: 1px solid #ccc;
          color: #333;
          font-size: 12px;
          span {
            float: left;
            color: #333;
            font-weight: 700;
          }
          a {
            float: right;
            color: #666;
          }
        }
        .n-enter {
          margin: 20px 0 0 20px;
          li {
            list-style: none;
            float: left;
            width: 210px;
            height: 50px;
            a {
              float: left;
              width: 40px;
              margin-right: 10px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .ifo {
              float: left;
              width: 160px;
              line-height: 21px;
              font-size: 12px;
              color: #000;
              h4 {
                font-size: 12px;
              }
              p {
                font-size: 12px;
                color: #666;
              }
            }
          }
        }
      }
    }
  }
}
a {
  color: #333;
}
.banner {
  margin: 0 140px;
  position: relative;
  .lun {
    position: relative;
    .iconfont {
      font-size: 50px;
      color: #666;
      position: absolute;
    }
    .icon-left-arrow {
      top: 120px;
      left: -50px;
    }
    .icon-zuoyoujiantou {
      top: 120px;
      right: -50px;
    }
    .el-carousel {
      img {
        width: 730px;
        height: 284px;
      }
    }
  }
  .guang {
    position: absolute;
    width: 254px;
    height: 285px;
    right: 0px;
    top: 0;
    z-index: 1000;
    span {
      cursor: pointer;
      display: block;
      width: 215px;
      height: 56px;
      background-image: url(../../../assets/image/download.png);
      background-position: 0 65px;
      position: absolute;
      bottom: 43px;
      left: 19px;
    }
  }
}
.music {
  overflow: hidden;
  display: flex;
  .g-mn1 {
    // width: 100%;
    // float: left;
    .g-wrap3 {
      margin-left: 140px;
      width: 690px;
      padding: 10px;
      .n-rcmd {
        padding: 0 10px;
        .v-hd2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #c10d0c;
          padding: 10px 0;
          padding-right: 40px;
          .retui {
            font-size: 20px;
            margin: 0 20px;
          }
          .tab {
            font-size: 12px;
            color: #666;
            a {
              margin-right: 7px;
            }
          }
          .more {
            font-size: 12px;
            color: #666;
            .icon-gengduo {
              color: #c20c0c;
              font-size: 12px;
              font-weight: bold;
            }
          }
        }
        .neirong {
          margin-top: 10px;
          ul {
            height: 400px;
            li {
              list-style: none;
              float: left;
              width: 140px;
              height: 204px;
              padding-right: 25px;
              padding-bottom: 30px;
              p {
                a {
                  color: #000;
                  font-size: 14px;
                }
              }
              .TopZiFa {
                position: relative;
                img {
                  width: 140px;
                  height: 140px;
                }
                .musicTopZi {
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 27px;
                  background-color: rgba(0, 0, 0, 0.5);
                  color: #ccc;
                  .icon-erjiyuyin {
                    float: left;
                    width: 14px;
                    height: 11px;
                    margin: 4px 5px 9px 10px;
                  }
                  span {
                    font-size: 12px;
                  }
                  .icon-bofang {
                    position: absolute;
                    right: 10px;
                    bottom: 5px;
                    width: 16px;
                    height: 17px;
                  }
                }
              }
            }
          }
        }
      }
      .n-new {
        .v-hd2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #c10d0c;
          padding: 10px 0;
          padding-right: 40px;
          .retui {
            font-size: 20px;
            margin: 0 20px;
          }
          a {
            font-size: 12px;
            margin-right: 7px;
          }
          .more {
            font-size: 12px;
            color: #666;
            .icon-gengduo {
              color: #c20c0c;
              font-size: 12px;
              font-weight: bold;
            }
          }
        }
        .inner {
          margin-top: 10px;
          height: 184px;
          background: #f5f5f5;
          border: 1px solid #fff;
          .roll {
            float: left;
            width: 645px;
            height: 180px;
            overflow: hidden;
            position: relative;
            .icon-left-arrow {
              position: absolute;
              top: 71px;
              left: 20px;
              width: 17px;
              height: 17px;
              color: #666;
            }
            .icon-zuoyoujiantou {
              position: absolute;
              top: 71px;
              right: 0px;
              width: 17px;
              height: 17px;
              color: #666;
            }
            ul {
              margin-left: 45px;
              margin-top: 30px;
              li {
                width: 100px;
                list-style: none;
                float: left;
                margin-right: 18px;
                .jiPic {
                  width: 100px;
                  height: 100px;
                  img {
                    width: 100%;
                  }
                }
                p {
                  // 超出一行隐藏
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .musicNam {
                  font-size: 12px;
                  margin-top: 5px;
                }
                .authName {
                  font-size: 12px;
                  color: #666;
                }
              }
            }
          }
        }
      }
      .n-bill {
        margin-top: 10px;
        .v-hd2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #c10d0c;
          padding: 10px 0;
          padding-right: 40px;
          .retui {
            font-size: 20px;
            margin: 0 20px;
          }
          a {
            font-size: 12px;
            margin-right: 7px;
          }
          .more {
            font-size: 12px;
            color: #666;
            .icon-gengduo {
              color: #c20c0c;
              font-size: 12px;
              font-weight: bold;
            }
          }
        }
        .n-bilst {
          height: 472px;
          margin-top: 20px;
          padding-left: 1px;
          display: flex;
          border: 1px solid #e0e0e0;
          background-color: #f4f4f4;
          .blk {
            margin-top: 0;
            width: 33%;

            .top {
              height: 100px;
              padding: 20px 0 0 19px;
              .cver {
                float: left;
                width: 80px;
                height: 80px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .tit {
                float: left;
                width: 116px;
                margin: 6px 0 0 10px;

                a {
                  font-size: 14px;
                  font-weight: 700;
                }
                .btn {
                  margin-top: 10px;
                  .iconfont {
                    font-size: 22px;
                    margin-right: 10px;
                    color: #c1c1c1;
                  }
                  .iconfont:hover {
                    color: #9b9b9b;
                  }
                }
              }
            }
            dd {
              ol {
                height: 319px;
                line-height: 32px;
                list-style: none;
                li {
                  height: 32px;
                  background-color: #e8e8e8;
                  padding-left: 20px;
                  overflow: hidden;
                  span {
                    color: #666666;
                    font-size: 16px;
                    margin-right: 10px;
                  }
                  .red {
                    color: #c30d0c;
                  }
                  a {
                    font-size: 12px;
                    color: #000;
                  }
                  a:hover {
                    border-bottom: 1px solid #000;
                  }
                  .three {
                    display: none;
                    margin-right: 5px;
                    float: right;
                    color: #999999;
                    font-size: 25px;
                    i:hover {
                      color: #656565;
                    }
                  }
                }
                li:nth-child(2n) {
                  background-color: #f4f4f4;
                }
                .thsli:hover {
                  .three {
                    display: block;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .g-sd1 {
    position: relative;
    border: 1px solid #dbdbdb;
    // float: right;
    width: 250px;
    .n-user-profile {
      padding-top: 0;
      background: linear-gradient(#fbfbfb, #e9e9e9);
      .tiLogin {
        // display: none;
        height: 126px;
        p {
          width: 205px;
          margin: 0 auto;
          padding: 16px 0;
          line-height: 22px;
          color: #666;
          font-size: 12px;
        }
        a {
          display: block;
          margin: 0 auto;
          width: 100px;
          height: 31px;
          line-height: 31px;
          text-align: center;
          color: #fff;
          background-color: #d8131a;
          font-size: 13px;
          border-radius: 6px;
        }
      }
      // 登录后显示个人信息
      .myinfo {
        height: 165px;
        padding-top: 20px;
        background-color: #f7f7f7;
        // display: none;
        .top {
          display: flex;
          justify-content: center;
          align-items: center;
          .fanga {
            width: 80px;
            height: 80px;
            a {
              display: inline-block;
              width: 80px;
              height: 80px;
              margin-right: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .info {
            width: 115px;
            margin-left: 18px;
            padding-top: 3px;
            h4 {
              overflow: hidden;
              cursor: pointer;
            }
            h4:hover {
              text-decoration: underline;
            }
            p {
              color: #999;
              font-size: 12px;
              padding: 3px;
              margin-top: 5px;
              margin-bottom: 0px;
              cursor: pointer;
            }
            .qian {
              margin-top: 15px;
              a {
                display: inline-block;
                width: 80%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;
                background-color: #2b7cc9;
                border-radius: 5px;
              }
            }
          }
        }
        .btm {
          margin: 22px 0 0 20px;
          overflow: hidden;
          li {
            list-style: none;
            float: left;
            height: 40px;
            padding: 0 18px;
            border-right: 1px solid #e4e4e4;
            a {
              color: #666;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }
            a:hover {
              color: #0c73c2;
            }
          }
          li:first-child {
            padding-left: 0;
          }
        }
      }
    }
    .n-single {
      margin-top: 15px;
      .v-hd3 {
        position: relative;
        height: 23px;
        margin: 0 20px;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        span {
          float: left;
          color: #333;
          font-weight: 700;
        }
        a {
          float: right;
          color: #666;
        }
      }
      .n-enter {
        margin: 6px 0 14px 20px;
        li {
          list-style: none;
          margin-top: 14px;
          height: 62px;
          a {
            float: left;
            width: 210px;
            height: 62px;
            background: #fafafa;
            .head {
              float: left;
              width: 62px;
              height: 62px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .ifo {
              float: left;
              width: 133px;
              height: 60px;
              padding-left: 14px;
              border: 1px solid #e9e9e9;
              border-left: none;
              h4 {
                margin-top: 8px;
                font-size: 14px;
                color: #333;
              }
              p {
                margin-top: 8px;
                font-size: 12px;
                color: #666;
              }
            }
          }
        }
      }
      .shenqin {
        a {
          display: inline-block;
          width: 205px;
          height: 31px;
          line-height: 31px;
          margin-left: 20px;
          border-radius: 4px;
          padding: 0 5px 0 0;
          color: #000;
          font-size: 12px;
          font-weight: 700;
          background-color: #f3f3f3;
          text-align: center;
        }
      }
    }
    .n-dj {
      margin-top: 30px;
      .v-hd3 {
        position: relative;
        height: 23px;
        margin: 0 20px;
        border-bottom: 1px solid #ccc;
        color: #333;
        font-size: 12px;
        span {
          float: left;
          color: #333;
          font-weight: 700;
        }
        a {
          float: right;
          color: #666;
        }
      }
      .n-enter {
        margin: 20px 0 0 20px;
        li {
          list-style: none;
          float: left;
          width: 210px;
          height: 50px;
          a {
            float: left;
            width: 40px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .ifo {
            float: left;
            width: 160px;
            line-height: 21px;
            font-size: 12px;
            color: #000;
            h4 {
              font-size: 12px;
            }
            p {
              font-size: 12px;
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>
